import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class ImagePreviewPage extends StatefulWidget {
  final List<String> images;
  final int initialIndex;

  const ImagePreviewPage({
    super.key,
    required this.images,
    required this.initialIndex,
  }) : assert(initialIndex >= 0 && initialIndex < images.length);

  @override
  State<ImagePreviewPage> createState() => _ImagePreviewPageState();
}

class _ImagePreviewPageState extends State<ImagePreviewPage> {
  // 声明 PageController 并初始化初始索引
  late PageController _pageController;
  // 记录当前显示的图片索引（用于更新页码）
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // 初始化控制器，设置初始页面
    _pageController = PageController(initialPage: widget.initialIndex);
    // 初始化当前索引为初始索引
    _currentIndex = widget.initialIndex;

    // 监听页面切换事件
    _pageController.addListener(() {
      // 取当前页面的整数索引（避免滑动过程中的小数）
      final currentPage = _pageController.page?.round() ?? 0;
      // 只有当索引变化时才更新状态
      if (currentPage != _currentIndex) {
        setState(() {
          _currentIndex = currentPage;
        });
      }
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black54,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.close, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        // 显示实时更新的页码（当前索引+1 / 总数量）
        title: Text(
          '${_currentIndex + 1}/${widget.images.length}',
          style: const TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: PhotoViewGallery(
        pageOptions: widget.images.map((url) {
          return PhotoViewGalleryPageOptions(
            imageProvider: NetworkImage(url),
            minScale: PhotoViewComputedScale.contained,
            maxScale: PhotoViewComputedScale.covered * 2,
            // 点击空白处关闭预览
            onTapDown: (context, details, controllerValue) {
              Navigator.pop(context);
            },
          );
        }).toList(),
        pageController: _pageController,
        scrollDirection: Axis.horizontal,
      ),
    );
  }
}

Widget networkImage(String url) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Image.network(
      url,
      fit: BoxFit.cover,
      loadingBuilder: (context, child, loadingProgress) {
        // 加载中显示占位符
        if (loadingProgress == null) return child;
        return Center(
          child: CircularProgressIndicator(
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
                : null,
          ),
        );
      },
      errorBuilder: (context, error, stackTrace) {
        return Container(
          color: Colors.grey[200],
          child: const Icon(Icons.image, color: Colors.grey, size: 30),
        );
      },
    ),
  );
}